import React from 'react';
import { Box, Flex, IconButton, useColorModeValue } from '@chakra-ui/react';
import { Link } from 'react-router-dom';
import { FaBook, FaGraduationCap, FaChartBar } from 'react-icons/fa';

const Footer = () => {
  const bgColor = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const activeColor = useColorModeValue('brand.500', 'brand.200');

  return (
    <Box
      as="footer"
      bg={bgColor}
      borderTop="1px"
      borderColor={borderColor}
      px={4}
      py={3}
      position="sticky"
      bottom="0"
      zIndex="sticky"
    >
      <Flex alignItems="center" justifyContent="space-around" maxW="container.md" mx="auto">
        <Link to="/">
          <IconButton
            aria-label="Home"
            icon={<FaBook />}
            variant="ghost"
            fontSize="xl"
            color={activeColor}
          />
        </Link>
        <Link to="/vocabulary">
          <IconButton aria-label="Vocabulary" icon={<FaBook />} variant="ghost" fontSize="xl" />
        </Link>
        <Link to="/practice">
          <IconButton
            aria-label="Practice"
            icon={<FaGraduationCap />}
            variant="ghost"
            fontSize="xl"
          />
        </Link>
        <Link to="/progress">
          <IconButton aria-label="Progress" icon={<FaChartBar />} variant="ghost" fontSize="xl" />
        </Link>
      </Flex>
    </Box>
  );
};

export default Footer;
